<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">今日人员统计</text></view>
				</template>
				<view class="title p-b-10 fw">办公室</view>
				<my-grid :list="list" :col="3" @click="(data) => detailFn(data, '办公室')" imgmode="heightFix" imgHight="60rpx" type="lr"></my-grid>
				<view class="title p-y-10 fw">油脂库</view>
				<my-grid :list="list2" :col="2" @click="(data) => detailFn(data, '油脂库')" imgmode="heightFix" imgHight="60rpx" type="lr"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">今日车辆统计</text></view>
				</template>
				<view class="title p-b-10 fw">主干道</view>
				<my-grid :list="list5" :col="2" @click="(data) => detailFn(data, '主干道')" imgmode="heightFix" imgHight="60rpx" type="lr"></my-grid>

				<view class="title p-y-10 fw">西排土场观景台三岔路口</view>
				<my-grid :list="list4" :col="2" @click="(data) => detailFn(data, '西排土场观景台三岔路口')" imgmode="heightFix" imgHight="60rpx" type="lr"></my-grid>

				<view class="title p-y-10 fw">一号车间二破</view>
				<my-grid :list="list3" :col="2" @click="(data) => detailFn(data, '一号车间二破')" imgmode="heightFix" imgHight="60rpx" type="lr"></my-grid>
			</u-collapse-item>

			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">重点视频监控</text></view>
				</template>
				<my-play-video-list
					:list="['8998bcc870bc4414bf4e6e9993e5b5c6', 'cfe5c7d2f9ee460c98444ce69244fa44', '1362739c8f904d96962ee4963f25dcb3', '4d99f737479d49518c4621bd3297a2d1']"
					@DataQuery="() => collapse.init()"
				/>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getApiFabric } from '@/api/customApi';

const collapse = ref(null),
	showMoreKeys = ref([1]);

/****************************************当日人员统计**************************************/
const list = ref([
	{
		img: 'r1.png',
		title: '员工',
		value: 0,
		unit: '人'
	},
	{
		img: 'r2.png',
		title: '访客',
		value: 0,
		unit: '人'
	},
	{
		img: 'r3.png',
		title: '陌生人',
		value: 0,
		unit: '人'
	}
]);

const list2 = ref([
	{
		img: 'r1.png',
		title: '员工',
		value: 0,
		unit: '人'
	},
	{
		img: 'r3.png',
		title: '陌生人',
		value: 0,
		unit: '人'
	}
]);

function fn1() {
	getApiFabric({
		apiCode: '75ae67ad-f857-469c-8ee4-96eb79d78254',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		if (res.data) {
			list.value.forEach((item, i) => (item.value = res.data[i].y));
		}
	});
}

function fn2() {
	getApiFabric({
		apiCode: '98a28e94-66c1-4f8c-a7f3-c48d437e5c08',
		propertyMapping: {
			title: 'name',
			value: 'val'
		}
	}).then((res) => {
		if (res.data) {
			list2.value[0].value = res.data[0]?.value;
			list2.value[1].value = res.data[2]?.value;
		}
	});
}

function detailFn(data, type) {
	uni.navigateTo({
		url: `/pages/application/znyq/intelligentPark/detail?data=${JSON.stringify({ ...data, type })}`
	});
}

/****************************************当日车辆统计**************************************/
const list3 = ref([
	{
		img: 'c1.png',
		title: '入场车数',
		value: 0,
		unit: '辆'
	},
	{
		img: 'c2.png',
		title: '离场车数',
		value: 0,
		unit: '辆'
	}
]);

const list4 = ref([
	{
		img: 'c1.png',
		title: '入场车数',
		value: 0,
		unit: '辆'
	},
	{
		img: 'c2.png',
		title: '离场车数',
		value: 0,
		unit: '辆'
	}
]);

const list5 = ref([
	{
		img: 'c1.png',
		title: '入场车数',
		value: 0,
		unit: '辆'
	},
	{
		img: 'c2.png',
		title: '离场车数',
		value: 0,
		unit: '辆'
	}
]);

function fn3() {
	getApiFabric({
		apiCode: 'a826a641-a1fd-49dc-be13-947bb5c81ef4',
		propertyMapping: {
			title: 'name',
			value: 'val'
		}
	}).then((res) => {
		if (res.data) {
			list3.value[0].value = res.data[0]?.value || 0;
			list3.value[1].value = res.data[1]?.value || 0;
		}
	});
}

function fn4() {
	getApiFabric({
		apiCode: '9d0ae7fc-a6f3-4aed-837f-295e7b934445',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		if (res.data) {
			list4.value[0].value = res.data[0].y || 0;
			list4.value[1].value = res.data[1].y || 0;
		}
	});
}

function fn5() {
	getApiFabric({
		apiCode: '99cf7899-662b-4ae1-8016-231dff6a4665',
		propertyMapping: {
			s: 'name',
			y: 'val'
		}
	}).then((res) => {
		if (res.data) {
			list5.value[0].value = res.data[0].y || 0;
			list5.value[1].value = res.data[1].y || 0;
		}
	});
}

function getServerData(refresh) {
	Promise.all([fn1(), fn2(), fn3(), fn4(), fn5()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
		setTimeout(() => {
			nextTick(() => {
				collapse.value.init();
			});
		}, 300);
	});
}

onShow(() => {
	getServerData();
});
onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped>
.video {
	width: 100%;
	height: 200rpx;
}
</style>
